// 引入styled-compontents模块
import styled from 'styled-components'

// 图片 导入图片
import img from '../../assets/12.jpg'

// css-in-js  把css写成js
// css样式就是一个组件
// styled.组件`样式`
const Title = styled.div`
  font-size:30px;
  color:red;
  font-weight:blod;
  h3 {
    font-size:14px;
    color:blue;
  }
  h1{
    font-size:20px;
    color:green;
  }
`

const Cnt = styled.div`
  color:#ccc;
  font-size:14px;
`

const Imgbg = styled.div`
  width:100px;
  height:100px;
  background:url(${img});
`

const Button1 = styled.button`
  color:red;
  border:1px solid blue;
  height:40px;
  line-height:40px;
  font-size:14px;
`
// 继承
const Button2 = styled(Button1)`
  font-size:18px;
  color:green;
  background:yellow;
`

// attrs给组件添加html属性
/* const Input = styled.input.attrs({
  placeholder: '你好'
})`
  height: ${props => props.height || 30}px;
  border:1px solid ${props => props.border || 'red'};

` */

/* const Input = styled.input.attrs(props => {
  return {
    placeholder: props.msg
  }
})`
  height: ${props => props.height || 30}px;
  border:1px solid ${props => props.border || 'red'};

` */

const Input = styled.input.attrs(props => ({
  placeholder: props.msg,
  type: props.password ? 'password' : 'text'
}))`
  height: ${props => props.height || 30}px;
  border:1px solid ${props => props.border || 'red'};
`


// 导入
export {
  // 样式组件
  Title,
  Cnt,
  Imgbg,
  Button1,
  Button2,
  Input
}
